<template>
    <view class="nova-row-center filter">
        <view class="search" v-if="searchshow">
            <uni-search-bar radius="100" @confirm="search" @input="input" @cancel="cancel" />
            <block></block>
        </view>
        <view class="item" v-if="showJG && show_jg">
            <picker @change="changejg" :value="index0" :range="array0">
                <view class="nova-flex nova-flex-center">
                    <text class="picker">{{ array0[index0] }}</text>
                </view>
            </picker>
        </view>
        <view class="item">
            <picker @change="changeqy" :value="index1" :range="array1" range-key="name">
                <view class="nova-flex nova-flex-center">
                    <text class="picker">{{ array1.length > index1 ? array1[index1].name : '区域' }}</text>
                </view>
            </picker>
        </view>
        <view class="item">
            <picker @change="changelx" :value="index2" :range="array2">
                <view class="nova-flex nova-flex-center">
                    <text class="picker">{{ array2[index2] }}</text>
                </view>
            </picker>
        </view>
        <view class="p-sx-filter" @tap="sx_filter()" v-if="sx_show && false">
            筛选
            <image class="sx_filter_img" src="/static/zw/shaixuan.png" mode="widthFix" />
        </view>
        <!-- drawer -->
        <!-- <sxfilter v-if="sx_show" ref="sxmodule" @reset="reset" @closeDrawer="closeDrawer"></sxfilter> -->
    </view>
</template>

<script>
import conf from '../../common/conf.js';
import sxfilter from './c-filter-drawer.vue';
import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue';
export default {
    name: 'c-list-filter',
    props: {
        page: {
            // 哪个页面？ay-xxx，gs-xxx, yz-xxx
            type: String,
            default: ''
        },
        show_jg: {
            type: Boolean,
            default: true
        },
        jg: {
            type: Array,
            default: () => []
        },
        qy: {
            type: Array,
            default: () => []
        },
        searchshow: {
            // 输入框是否显示
            type: Boolean,
            default: false
        }
    },
    components: { sxfilter, uniSearchBar },
    data() {
        return {
            // 是否显示jg
            showJG: this.$global.role == 2 || (this.$global.role == 3),
            array0: ['籍贯'].concat(conf.provinces2),
            array1: this.qy,
            array2: ['类型', '钟点工', '单次保洁', '月嫂', '育婴师', '住家保姆', '老人陪伴', '催乳师', '病人陪护'],
            index0: 0,
            index1: 0,
            index2: 0,
            sx_show: true //是否显示筛选
        };
    },
    created() {
        if (this.$global.districts) {
            this.array1 = this.$global.districts;
        }
        console.log(this.$global.role);
    },
    methods: {
        setQY() {
            this.array1 = this.$global.districts || [];
        },
        async changejg(e) {
            let v = e.detail.value;
            this.index0 = v;
            let place = this.array0[v];
            if (this.index0 == 0) {
                place = '';
            }
            this.$emit('filter', { place: place });
        },
        async changeqy(e) {
            let v = e.detail.value;
            this.index1 = v;
            let area = this.array1[v].name ? this.array1[v].name : '';
            let cityId = this.array1[v].name ? this.array1[v].name : '';
            this.$emit('filter', { area: area });
        },
        async changelx(e) {
            let type = e.detail.value;
            this.index2 = type;
            this.$emit('filter', { type: type });
        },
        // // 点击筛选
        sx_filter() {
            // this.$refs.sxmodule.sxfilter()
            this.$emit('sxfilter');
            console.log('点击筛选1');
        },
        // // 关闭抽屉
        // closeDrawer(e){
        //     console.log(e,'关闭抽屉')
        // },
        // // 重置抽屉参数
        // reset(e){
        //     console.log(e,'重置抽屉参数')
        // },
        // 搜索框的search
        search(res) {
            console.log('search ', res);
            this.$emit('search', res.value);
        },
        // 搜索框的输入
        input(res) {
            // this.searchVal = res.value
            console.log('搜索框输入的值', res.value);
            this.$emit('input', res.value);
        },
        // 搜索框的取消按钮
        cancel(res) {
            this.$emit('cancel', res.value);
        }
    }
};
</script>

<style lang="scss">
.filter {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    /* #ifdef H5 */
    top: var(--window-top);
    /* #endif */
    z-index: 10;
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
    box-sizing: border-box;
    flex-wrap: wrap;
    .search {
        flex: 0 0 100%;
    }
    .item {
        flex: 1;
        .picker {
            color: #333333;
            font-size: 24rpx;
            height: 72rpx;
            line-height: 72rpx;
            position: relative;
            text-align: center;
            &:after {
                content: '';
                position: absolute;
                top: 30rpx;
                right: -20rpx;
                width: 10rpx;
                height: 10rpx;
                display: inline-block;
                border-top: 1rpx solid #333;
                border-right: 1rpx solid #333;
                transform: rotate(135deg);
                transition: transform linear 0.2s;
            }
        }
    }
    .p-sx-filter {
        flex: 1;
        text-align: center;
        height: 72rpx;
        line-height: 72rpx;
        .sx_filter_img {
            width: 20rpx;
            height: 20rpx;
            margin-left: 4rpx;
        }
    }
}
</style>
